<template>
  <div style="height: 100%; position: relative">
    <headerNav />
    <div
      class="section"
      :style="{ backgroundImage: 'url(' + joinPlanebg + ')' }"
    >
      <!-- <div class="headertext">关于星球</div> -->
      <div class="maintext">
        <i class="el-icon-share"></i> 邮箱地址：happyplanet668899@gmail.com
      </div>
      <div class="maintext01">
        <i class="el-icon-share"></i> 网址：www.happyplanetearth.top
      </div>
      <div class="maintext01">
        <i class="el-icon-share"></i> Twitter: happyplanetAI
      </div>
      <div class="maintext01">
        <i class="el-icon-share"></i> TelegramGroup: <a href="https://t.me/HappyPlanetOfficial" target="blank">https://t.me/HappyPlanetOfficial</a>
      </div>
    </div>
  </div>
</template>

<script>
import headerNav from "./headerNav.vue";
export default {
  components: {
    headerNav,
  },
  data() {
    return {
      joinPlanebg: require("@/assets/img/关于星球bg.png"),
    };
  },
};
</script>
<
<style lang="less" scoped>
.section {
  height: 100%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  touch-action: none;
  transform: translate3d(0px, 0px, 0px);
  transition: transform 700ms ease 0s;
  word-wrap: break-word;
  word-break: break-all;
}
.headertext {
  color: #fff;
  font-size: 28px;
  font-weight: 700;
  padding-top: 150px;
  padding-left: 150px;
}
.maintext {
  color: #c0c4cc;
  font-size: 1.6rem;
  font-weight: 700;
  padding-left: 10%;
  width: 75%;
  line-height: 45px;
  padding-top: 150px;
}
.maintext01 {
  color: #c0c4cc;
  font-size: 1.6rem;
  font-weight: 700;
  padding-left: 10%;
  width: 75%;
  line-height: 45px;
  padding-top: 30px;
}

@media (max-width: 992px) {
  .section {
    background-size: cover !important;
    background-position: center;
  }
}

@media (max-width: 576px) {
  .section {
    background-size: cover !important;
    background-position: center;
  }
}
</style>
